// colorful
:root {
  --red-1: #ffece8;
  --red-2: #fdcdc5;
  --red-3: #fbaca3;
  --red-4: #f98981;
  --red-5: #f76560;
  --red-6: #f53f3f;
  --red-7: #cb272d;
  --red-8: #a1151e;
  --red-9: #770813;
  --red-10: #4d000a;

  --orangered-1: #fff3e8;
  --orangered-2: #fdddc3;
  --orangered-3: #fcc59f;
  --orangered-4: #faac7b;
  --orangered-5: #f99057;
  --orangered-6: #f77234;
  --orangered-7: #cc5120;
  --orangered-8: #a23511;
  --orangered-9: #771f06;
  --orangered-10: #4d0e00;

  --orange-1: #fff7e8;
  --orange-2: #ffe4ba;
  --orange-3: #ffcf8b;
  --orange-4: #ffb65d;
  --orange-5: #ff9a2e;
  --orange-6: #ff7d00;
  --orange-7: #d25f00;
  --orange-8: #a64500;
  --orange-9: #792e00;
  --orange-10: #4d1b00;

  --gold-1: #fffce8;
  --gold-2: #fdf4bf;
  --gold-3: #fce996;
  --gold-4: #fadc6d;
  --gold-5: #f9cc45;
  --gold-6: #f7ba1e;
  --gold-7: #cc9213;
  --gold-8: #a26d0a;
  --gold-9: #774b04;
  --gold-10: #4d2d00;

  --yellow-1: #feffe8;
  --yellow-2: #fefebe;
  --yellow-3: #fdfa94;
  --yellow-4: #fcf26b;
  --yellow-5: #fbe842;
  --yellow-6: #fadc19;
  --yellow-7: #cfaf0f;
  --yellow-8: #a38408;
  --yellow-9: #785d03;
  --yellow-10: #4d3800;

  --lime-1: #fcffe8;
  --lime-2: #edf8bb;
  --lime-3: #dcf190;
  --lime-4: #c9e968;
  --lime-5: #b5e241;
  --lime-6: #9fdb1d;
  --lime-7: #7eb712;
  --lime-8: #5f940a;
  --lime-9: #437004;
  --lime-10: #2a4d00;

  --green-1: #e8ffea;
  --green-2: #aff0b5;
  --green-3: #7be188;
  --green-4: #4cd263;
  --green-5: #23c343;
  --green-6: #00b42a;
  --green-7: #009a29;
  --green-8: #008026;
  --green-9: #006622;
  --green-10: #004d1c;

  --cyan-1: #e8fffb;
  --cyan-2: #b7f4ec;
  --cyan-3: #89e9e0;
  --cyan-4: #5edfd6;
  --cyan-5: #37d4cf;
  --cyan-6: #14c9c9;
  --cyan-7: #0da5aa;
  --cyan-8: #07828b;
  --cyan-9: #03616c;
  --cyan-10: #00424d;

  --blue-1: #e8f7ff;
  --blue-2: #c3e7fe;
  --blue-3: #9fd4fd;
  --blue-4: #7bc0fc;
  --blue-5: #57a9fb;
  --blue-6: #3491fa;
  --blue-7: #206ccf;
  --blue-8: #114ba3;
  --blue-9: #063078;
  --blue-10: #001a4d;

  --arcoblue-1: #e8f3ff;
  --arcoblue-2: #bedaff;
  --arcoblue-3: #94bfff;
  --arcoblue-4: #6aa1ff;
  --arcoblue-5: #4080ff;
  --arcoblue-6: #165dff;
  --arcoblue-7: #0e42d2;
  --arcoblue-8: #072ca6;
  --arcoblue-9: #031a79;
  --arcoblue-10: #000d4d;

  --purple-1: #f5e8ff;
  --purple-2: #ddbef6;
  --purple-3: #c396ed;
  --purple-4: #a871e3;
  --purple-5: #8d4eda;
  --purple-6: #722ed1;
  --purple-7: #551db0;
  --purple-8: #3c108f;
  --purple-9: #27066e;
  --purple-10: #16004d;

  --pinkpurple-1: #ffe8fb;
  --pinkpurple-2: #f7baef;
  --pinkpurple-3: #f08ee6;
  --pinkpurple-4: #e865df;
  --pinkpurple-5: #e13edb;
  --pinkpurple-6: #d91ad9;
  --pinkpurple-7: #b010b6;
  --pinkpurple-8: #8a0993;
  --pinkpurple-9: #650370;
  --pinkpurple-10: #42004d;

  --magenta-1: #ffe8f1;
  --magenta-2: #fdc2db;
  --magenta-3: #fb9dc7;
  --magenta-4: #f979b7;
  --magenta-5: #f754a8;
  --magenta-6: #f5319d;
  --magenta-7: #cb1e83;
  --magenta-8: #a11069;
  --magenta-9: #77064f;
  --magenta-10: #4d0034;
}

// brand-color
:root {
  --success-1: var(--green-1);
  --success-2: var(--green-2);
  --success-3: var(--green-3);
  --success-4: var(--green-4);
  --success-5: var(--green-5);
  --success-6: var(--green-6);
  --success-7: var(--green-7);
  --success-8: var(--green-8);
  --success-9: var(--green-9);
  --success-10: var(--green-10);
  --primary-1: var(--arcoblue-1);
  --primary-2: var(--arcoblue-2);
  --primary-3: var(--arcoblue-3);
  --primary-4: var(--arcoblue-4);
  --primary-5: var(--arcoblue-5);
  --primary-6: var(--arcoblue-6);
  --primary-7: var(--arcoblue-7);
  --primary-8: var(--arcoblue-8);
  --primary-9: var(--arcoblue-9);
  --primary-10: var(--arcoblue-10);
  --danger-1: var(--red-1);
  --danger-2: var(--red-2);
  --danger-3: var(--red-3);
  --danger-4: var(--red-4);
  --danger-5: var(--red-5);
  --danger-6: var(--red-6);
  --danger-7: var(--red-7);
  --danger-8: var(--red-8);
  --danger-9: var(--red-9);
  --danger-10: var(--red-10);
  --warning-1: var(--orange-1);
  --warning-2: var(--orange-2);
  --warning-3: var(--orange-3);
  --warning-4: var(--orange-4);
  --warning-5: var(--orange-5);
  --warning-6: var(--orange-6);
  --warning-7: var(--orange-7);
  --warning-8: var(--orange-8);
  --warning-9: var(--orange-9);
  --warning-10: var(--orange-10);
  --link-1: var(--arcoblue-1);
  --link-2: var(--arcoblue-2);
  --link-3: var(--arcoblue-3);
  --link-4: var(--arcoblue-4);
  --link-5: var(--arcoblue-5);
  --link-6: var(--arcoblue-6);
  --link-7: var(--arcoblue-7);
  --link-8: var(--arcoblue-8);
  --link-9: var(--arcoblue-9);
  --link-10: var(--arcoblue-10);
  --gray-1: #f7f8fa;
  --gray-2: #f2f3f5;
  --gray-3: #e5e6eb;
  --gray-4: #c9cdd4;
  --gray-5: #a9aeb8;
  --gray-6: #86909c;
  --gray-7: #6b7785;
  --gray-8: #4e5969;
  --gray-9: #272e3b;
  --gray-10: #1d2129;
  --color-neutral-1: var(--gray-1);
  --color-neutral-2: var(--gray-2);
  --color-neutral-3: var(--gray-3);
  --color-neutral-4: var(--gray-4);
  --color-neutral-5: var(--gray-5);
  --color-neutral-6: var(--gray-6);
  --color-neutral-7: var(--gray-7);
  --color-neutral-8: var(--gray-8);
  --color-neutral-9: var(--gray-9);
  --color-neutral-10: var(--gray-10);
}

:root {
  --el-bg-color-page: var(--color-neutral-2);
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: var(--color-neutral-10);
  --el-text-color-regular: var(--color-neutral-8);
  --el-text-color-secondary: var(--color-neutral-6);
  --el-text-color-placeholder: var(--color-neutral-5);
  --el-text-color-disabled: var(--color-neutral-4);
  --el-border-color: var(--color-neutral-3);
  --el-border-color-light: var(--color-neutral-2);
  --el-border-color-lighter: var(--color-neutral-1);
  --el-border-color-extra-light: var(--color-neutral-1);
  --el-border-color-dark: var(--color-neutral-4);
  --el-border-color-darker: var(--color-neutral-5);
  --el-fill-color: var(--color-neutral-2);
  --el-fill-color-light: var(--color-neutral-1);
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fff;
  --el-fill-color-dark: var(--color-neutral-3);
  --el-fill-color-darker: var(--color-neutral-4);
  --el-fill-color-blank: #ffffff;

  // warning
  --el-color-warning: var(--warning-6);
  --el-color-warning-light-3: var(--warning-5);
  --el-color-warning-light-5: var(--warning-4);
  --el-color-warning-light-7: var(--warning-3);
  --el-color-warning-light-8: var(--warning-2);
  --el-color-warning-light-9: var(--warning-1);
  --el-color-warning-dark-2: var(--warning-5);

  // danger
  --el-color-danger: var(--danger-6);
  --el-color-danger-light-3: var(--danger-5);
  --el-color-danger-light-5: var(--danger-4);
  --el-color-danger-light-7: var(--danger-3);
  --el-color-danger-light-8: var(--danger-2);
  --el-color-danger-light-9: var(--danger-1);
  --el-color-danger-dark-2: var(--danger-5);

  // success
  --el-color-success: var(--success-6);
  --el-color-success-light-3: var(--success-5);
  --el-color-success-light-5: var(--success-4);
  --el-color-success-light-7: var(--success-3);
  --el-color-success-light-8: var(--success-2);
  --el-color-success-light-9: var(--success-1);
  --el-color-success-dark-2: var(--success-5);



  --el-border-radius-base: 2px;
  /* 左侧菜单展开、收起动画时长 */
  --pure-transition-duration: 0.3s;

  /* 常用border-color 需要时可取用 */
  --pure-border-color: rgb(5 5 5 / 6%);

  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #a6a6a6;
}
